/*
点击head显示文字介绍再次点击隐藏交替
升级:鼠标移入文本显示 移出文本隐藏
再升级合成事件 hover(func1,func2) 是合成mouseenter 和mouseleave两个事件
toggle()注意大部分配合click事件 不配合鼠标移入移出
*/

$(function () {
    // 永远的第一步 找全局元素
    let $panel = $('#panel'),
        $head = $panel.children('.head'),
        $content = $panel.children('.content'),
        $wrap1 = $('.wrap1'),
        $wrap2 = $('.wrap2')

    // $head.on('mouseenter mouseleave', function () {
    //     $content.toggle()
    // })
    // 淡入淡出
    let enter = function () {
        // $content.show(3000) //增大高度宽度(宽高会跟着动)透明度， display一直是block
        // $content.fadeIn(3000) //只增大透明度 display一直是block
        $content.slideDown(3000) //只增大高度 display一直是block
    }
    let leave = function () {
        // $content.hide(3000)//减少高度宽度透明度，当opacity=0 display=none
        // $content.fadeOut(3000) //减小透明度opacity 当opacity=0 display=none
        $content.slideUp(3000) //减小高度为0时，display=0
    }
    $head.hover(enter, leave)

    $('li').on('mouseenter mouseleave', (e) => {
        console.log(this)
        console.log(e.target)
        console.log(e.currentTarget)
        $(this).toggleClass('highlight')
    })
    // siblings 指的是原来的兄弟，不是匹配之后的兄弟
    // $('li').on('mouseenter',function(){
    //     $(this).addClass('highlight').siblings().removeClass('highlight')
    // }).on('mouseleave',function(){
    //     $(this).removeClass('highlight')
    // })


    // 点击head显示文字介绍再次点击隐藏交替
    // $head.bind('click', function () {
    //     $content.toggle()
    // }).bind('click', function () {
    //     $content.css('fontSize', 30)
    // }).bind('click', myfun3 = function () {
    //     $content.css({ position: 'absolute', left: 100 })

    // }).unbind('click',myfun3)

    // // 鼠标移入文本显示 移出文本隐藏
    // $head.on('mouseenter',function(){
    //     $content.show()
    // }).on('mouseleave',function(){
    //     $content.hide()
    // })

    // // hover合成mouseenter+mouseleave事件
    // let enter = function () {
    //     $content.show()

    // }
    // let leave = function () {
    //     $content.hide()
    // }
    // $head.hover(enter, leave)





})